<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="origin-when-cross-origin">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>家政服务</title>
    <link href="../../css/common.css" rel="stylesheet">
    <link href="../../css/form.css" rel="stylesheet">
    <link href="../../plugin/layui-v2.9.0/css/layui.css" rel="stylesheet">
</head>

<body>
    <div class="form-content">
        <div class="top-header">
            <div class="content">
                <span class="server-name">
                    家政服务
                </span> 
            </div>
        </div>
        <div class="form-box">
            <div class="content">
                <!-- 表单 -->
                <form class="layui-form">
                     <!-- 家政服务类型 -->
                     <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="required">*</span> 家政服务类型
                        </label>
                        <div class="layui-input-inline">
                            <select id="os_g_type" lay-filter="type-select-filter" lay-verify="required">
                                <option value="" selected>请选择家政服务类型</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select id="os_g_id" lay-filter="goods-select-filter" lay-verify="required">
                                <option value="" selected>请选择家政服务</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select id="os_g_standards" lay-filter="standards-select-filter" lay-verify="required">
                                <option value="" selected>请选择规格</option>
                            </select>
                        </div>
                    </div>
                     <!-- 购买数量 -->
                     <div class="layui-form-item">
                        <label class="layui-form-label"><span class="required">*</span> 购买数量</label>
                        <div class="layui-inline"  style="width: 190px;">
                            <input type="number" id="os_gs_size" value="1"  autocomplete="off" class="layui-input" min="1" step="1" lay-affix="number">
                        </div>
                    </div>
                    <!-- 预约服务时间 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="required">*</span>预约服务时间</label>
                        <div class="layui-input-inline layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-date"></i>
                            </div>
                            <input type="text" class="layui-input" id="os_o_receiver_want_time" placeholder="请选择预约服务时间">
                        </div>
                    </div>
                    <!-- 详细地址 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            详细地址
                        </label>
                        <div class="layui-input-block">
                            <input type="text" id="os_o_receiver_add" placeholder="请输入详细地址" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <!-- 联系人 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="required">*</span> 联系人
                        </label>
                        <div class="layui-inline">
                            <input type="text" id="os_o_receiver_name" placeholder="请输入联系人"
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!-- 联系电话 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="required">*</span> 联系电话</label>
                        <div class="layui-inline" >
                            <input type="text" id="os_o_receiver_phone" lay-verify="required|phone" placeholder="请输入手机号"
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!-- 订单备注 -->
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">订单备注</label>
                        <div class="layui-input-block">
                            <textarea id="os_o_insert_body_remark" placeholder="请输入订单备注(有什么其他要求，例如内容和需求，您可以写在这里)" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block to-right">
                            <button  type="button" class="to_back layui-btn layui-btn-primary layui-border-purple">返回</button> 
                            <button  type="button" class="saveForm layui-btn">提交</button> 
                        </div>
                    </div> 
                </form>
            </div>
        </div>
    </div>
    <script src="../../plugin/layui-v2.9.0/layui.js"></script>
    <script src="../../plugin/jquery-2.0.0.min.js"></script>
    <script src="../../plugin/tool.js"></script>
    <script src="../../js/config.js"></script> 
    <script src="../../api.js"></script> 
    <script src="../../mock/data.js"></script> 
    <script> 
        $(function(){
            API.addClickTimes("家政服务");
        })
        var form,laydate,element;
        layui.use(function () {
            form = layui.form; 
            laydate = layui.laydate;
            element = layui.element;
            form.on('select(type-select-filter)', function(data){
               FORM.setGoodsData(data.value);
            });
            form.on('select(goods-select-filter)', function(data){
               FORM.setStanderData(data.value);
            }); 
            FORM.initPage();
        }); 
        var FORM = {
            pageDict:null, 
            initPage:function(){
                laydate.render({
                    elem: '#os_o_receiver_want_time',
                    type: 'datetime',
                    min: new Date().format("yyyy-MM-dd")
                });
                
                $(".to_back").click(function () {
                    window.location.href="../../index.html";
                });   
                $(".saveForm").click(function(){
                    FORM.saveForm();
                });
                var name =localStorage.getItem("os_u_full_name");
                var phone =localStorage.getItem("os_u_phone");
                if(name){
                    $("#os_o_receiver_name").val(name);
                }
                if(phone){
                    $("#os_o_receiver_phone").val(phone);
                }
                API.getJzfwPageDict(function(json){
                    //console.log(json);
                    if (json.code != "0") { 
                        layer.alert(json.codemessage) ;
                        return;
                    }else{ 
                        FORM.pageDict = json;
                        FORM.setTypeData();
                    }	 
                }); 
            },
            setTypeData:function(){
                var data = [] 
                var html='<option value="" selected>请选择家政服务类型</option>';
                FORM.pageDict.types.forEach(item => {
                    html+='<option value="'+item.os_g_type+'">'+item.os_d_codevalue+'</option>';
                }); 
                $("#os_g_type").html(html);
                layui.form.render($('#os_g_type'));
            }, 
            setGoodsData:function(os_g_type){
                var data = [] 
                var html='<option value="" selected>请选择家政服务</option>';
                FORM.pageDict.goods.forEach(item => {
                    if(item.os_g_type == os_g_type){
                        html+='<option value="'+item.os_g_id+'">'+item.os_g_title+'</option>';
                    }
                }); 
                $("#os_g_id").html(html);
                layui.form.render($('#os_g_id'));
            }, 
            setStanderData:function(os_g_id){
                var data = []  
                var Goods = FORM.pageDict.goods.find(function(item){
                    return item.os_g_id == os_g_id;
                })
                var standers = [];
                if(Goods && Goods.os_g_standards){
                    var g_standards = Goods.os_g_standards.split(";");
                    var g_prices = Goods.os_g_standards_price.split(";");
                    for(var i=0;i<g_standards.length;i++){
                        standers.push({
                            title:g_standards[i],
                            prices:g_prices[i]
                        });
                    } 
                }
                var html='<option value="" selected>请选择规格</option>';
                standers.forEach(item => {
                    html+='<option value="'+item.title+'">'+item.prices+'</option>';
                }); 
                $("#os_g_standards").html(html);
                layui.form.render($('#os_g_standards'));
            }, 
            saveForm:function(){
                var has_error = false;
                var os_gs_size = $("#os_gs_size").val();//购买数量 
                if(os_gs_size==""||os_gs_size=="0"||os_gs_size==0){
                    layer.tips("购买数量请再次核实！",$("#os_gs_size"),{tipsMore: true,tips:[1, 'red']}); 
                    has_error = true;
                }
                //必填项检查
                var mast_list = ["os_o_receiver_want_time","os_o_receiver_add","os_o_receiver_name","os_o_receiver_phone"];
                for(var i = 0 ;i<mast_list.length;i++){
                    if( $("#"+mast_list[i]).val()=="" ){
                        layer.tips("不能为空！",$("#"+mast_list[i]),{tipsMore: true,tips:[1, 'red']});
                        has_error = true;
                    }
                }
                var mast_list = ["os_g_type","os_g_id","os_g_standards"];
                for(var i = 0 ;i<mast_list.length;i++){
                    if( $("#"+mast_list[i]).val()=="" ){
                        layer.tips("不能为空！",$("#"+mast_list[i]).parent("div").find("input"),{tipsMore: true,tips:[1, 'red']});
                        has_error = true;
                    }
                }
                if(has_error){
                    layer.msg("请填写完毕后提交！")
                    return;
                }
                var datas_p = { 
                    os_gs_size,
                    os_g_id:$("#os_g_id").val(),
                    os_g_standards:$("#os_g_standards").val(),
                    os_o_insert_body_remark:$("#os_o_insert_body_remark").val(),
                    os_o_receiver_add:$("#os_o_receiver_add").val(),
                    os_o_receiver_name:$("#os_o_receiver_name").val(),
                    os_o_receiver_phone:$("#os_o_receiver_phone").val(),
                    os_o_receiver_want_time:$("#os_o_receiver_want_time").val(),
				};
                //console.log(datas_p);
                // return;
        	    layer.load();
                API.submitJzfw(datas_p,function(json){
                    if (json.code != "0") {
                        layer.close(layer.index);   
                        layer.alert(json.codemessage) ;
                    }else{ 
                        layer.msg(json.codemessage);
                        setTimeout(function(){
                            window.location.href="./list.html";
                        },1000);
                    }	
                })

            },
           
        } 
    </script>
</body>

</html>